<template>
	<view>
		<up-popup :show="showPop" @close="showPop = false" mode="bottom" round="20" :closeable="true">
			<view class="login_box">
				<view class="tips">
					<text class="tit">获取你的头像、昵称</text>
					<text class="sub_tit">获取用头像、昵称，主要用于向用户提供具有辨识度的用户中心</text>
				</view>
				<up-form
					labelPosition="left"
					:model="formData"
					:rules="formData.rules"
					ref="formRef">
					<up-form-item label="头像" borderBottom="true" @click="chooseAvatar">
						<up-image :show-loading="false" :src="formData.userInfo.avatar" width="80rpx" height="80rpx" radius="10"></up-image>
						<template #right>
							<up-icon name="arrow-right" ></up-icon>
						</template>
					</up-form-item>
					<up-form-item label="昵称" prop="userInfo.nickName" borderBottom="true">
						<up-input border="none" placeholder="请输入昵称" v-model="formData.userInfo.nickName"></up-input>
					</up-form-item>
					<up-form-item label="性别" @click="formData.showSex = true" prop="userInfo.gender" borderBottom="true">
						<up-input v-model="formData.userInfo.gender" border="none" placeholder="请选择性别" disabledColor="#ffffff"></up-input>
						<template #right>
							<up-icon name="arrow-right" ></up-icon>
						</template>
					</up-form-item>
				</up-form>
				<up-action-sheet
					:show="formData.showSex"
					:actions="formData.actions"
					title="请选择性别"
					@close="formData.showSex = false"
					@select="sexSelect"
				></up-action-sheet>
				<view class="btn_box">
					<up-button @click="submit" :loading="isLoadind" loadingText="上传中" type="primary">一键登录</up-button>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>  
import { ref } from 'vue'
import { UploadAvatar } from '@/utils/UploadAvatar.js'
import { useUserStore } from '@/store/index.js'

const userStore = useUserStore()
// popup弹出层
const showPop = ref(false) 
// button上传加载
const isLoadind = ref(false)

// form
const formData = ref({
	showSex: false,
	userInfo:{
		nickName: '',
		gender: '',
		avatar: 'https://env-00jxh5z6ma51.normal.cloudstatic.cn/PostImg/2024-08-21/20220801204303_cef03.thumb.400_0_1724230450.jpeg?expire_at=1724308912&er_sign=cd138dce58c67b94d7b5a199d4508b0d'
	},
	actions: [  
		{ name: '男' },
		{ name: '女' }
	],
	rules: {  
	    'userInfo.nickName': {  
	      type: 'string',  
	      required: true,  
	      message: '请填写姓名',  
	      trigger: ['blur', 'change'],  
	    },  
	    'userInfo.gender': {  
	      type: 'string',  
	      max: 1,  
	      required: true,  
	      message: '请选择男或女',  
	      trigger: ['blur', 'change'],  
	    },  
	}
})
// 绑定校验规则
const formRef = ref(null)
// 选择性别
const sexSelect = (e) => {  
  formData.value.userInfo.gender = e.name
}  
// 提交
const submit = () => {
	formRef.value.validate()
	.then(async valid => {
		if(valid){
			isLoadind.value = true
			// 上传图片拿到fileID
			const avatarUrl = await UploadAvatar(formData.value.userInfo.avatar)
			// console.log(avatarUrl);
			formData.value.userInfo.avatar = avatarUrl.fileID
			console.log('头像上传成功', avatarUrl.fileID);
			// Store中更新
			await userStore.Login(formData.value.userInfo)
			// 关闭pop
			showPop.value = false
			isLoadind.value = false
			uni.$u.toast(`欢迎您~${formData.value.userInfo.nickName}`)
		}
	})
	.catch(err => {
		console.log(err);
	})
} 

// 选择头像
const chooseAvatar = async () => {
	// 获取本地图片路径
	const path = await uni.chooseImage({ count: 1 })
	formData.value.userInfo.avatar = path.tempFilePaths[0]
}
// 打开pop
const openPop = () => {
	showPop.value = true
}
defineExpose({openPop})
</script>

<style>
.login_box{padding: 60rpx 30rpx;}
.login_box .tit{font-size: 40rpx;margin-bottom: 10rpx;display: block;}
.login_box .sub_tit{color: gray;display: block;font-size: 28rpx;}
.btn_box {margin-top: 40rpx;}
</style>